<template>
  <Card title="单位信息">
    <template #header-right>
      <tm-button
        type="primary"
        :width="160"
        :height="48"
        :margin="[0]"
        :round="10"
        icon="ali-icon icon-jiahao1"
        label="添加单位"
        :font-size="24"
        @click="handleAddCompany"
      ></tm-button>
    </template>
    <view v-for="(item, index) in botCardInfo.botCompanyInfoVoList"  :key="index">
      <view class="hb-flex hb-items-center hb-gap-3 hb-py-3">
        <view>
          <TImage width="80rpx" height="80rpx" error-img-type="unit" :src="item.logo" />
        </view>
        <view class="hb-flex-1">
          <view class="hb-text-sm hb-font-bold hb-mb-2">{{ item.name }}</view>
          <RoleTag type="superAdmin" :text="item.position" />
        </view>
        <view @click="handleEditCompany(item)">
          <text class="ali-icon icon-edit hb-text-xl hb-p-1"></text>
        </view>
      </view>
    </view>
    <Empty v-if="!botCardInfo.botCompanyInfoVoList?.length" text="暂未添加单位信息">
      <tm-button
        type="primary"
        :width="176"
        :height="64"
        :round="10"
        icon="ali-icon icon-jiahao1"
        label="立即添加"
        :font-size="24"
        @click="handleAddCompany"
      ></tm-button>
    </Empty>
  </Card>
</template>

<script lang="ts" setup>
  /* 单位信息组件 */
  import Card from '../../components/Card/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import RoleTag from '@/components/RoleTag/index.vue';
  import { BotCardInfo, BotCompanyInfo } from '@/api/card/type';
  import Empty from '@/components/Empty/Empty.vue';
  const props = defineProps<{
    botCardInfo: BotCardInfo;
  }>();
  const emit = defineEmits<{
    (e: 'success'): void;
  }>();
  const handleAddCompany = () => {
    navigateTo({
      name: 'companyInfoEdit',
      options: {
        success: () => {
          emit('success');
        },
      },
    });
  };
  const handleEditCompany = (item: BotCompanyInfo) => {
    navigateTo({
      name: 'companyInfoEdit',
      options: {
        id: item.id,
        success: () => {
          emit('success');
        },
      },
    });
  };
</script>

<style lang="scss" scoped>
  /* 使用Windi CSS，无需额外样式 */
</style>
